<template>
  <!-- <h2>{{ count }}</h2> -->

  <!-- <button @click="count++">点击加一</button> -->

  <h2>{{ userInfo.name }}</h2>

  <h2>{{ userInfo.age }}</h2>

  <button @click="changeAge">修改用户信息</button>
</template>

<script>
//1.导入ref
import { ref } from 'vue'

export default {
  setup () {
    //2.使用ref包裹数据
    const count = ref(1)

    //const count = reactive({value:1})

    // console.log(count)

    const addCount = () => {
      //js当中修改ref包裹的数据需要用到value
      //模版中不需要value
      count.value++
    }

    const userInfo = ref({
      name: 'harry',
      age: 29
    })

    const changeAge = () => {
      // userInfo.age++

      userInfo.value.age++

      console.log(userInfo.value.age)
    }

    //3.返回数据
    return { count, addCount, userInfo, changeAge }
  }
}
</script>

<style lang="less"></style>
